<template>
  <div>
    <div class="ticket-container">
      <div class="item">
        <div class="left">
          <span class="start-date" style="font-size:1.5rem">{{schedules.show_time}}</span>
          <span class="end-date">{{endtime1}}:{{endtime2}}散场</span>
        </div>
        <div class="center">
          <div class="info">
            <span class="language">{{schedules.language}}</span>
            <span class="hall">{{schedules.hall_name}}</span>
          </div>
          <div class="price">{{schedules.price}}.00元</div>
        </div>
        <div class="right">
          <span class="buy-btn" @click="buy">购票</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:["schedules","movieName"],
    data() {
      return {
        endtime1: 0,
        endtime2: 0
      }
    },
    methods: {
      buy() {
        console.log("名字"+this.movieName)
        this.$router.push({
        path:"/chooseseat",
        query:{
          movieName:this.movieName,
          showTime:this.schedules.show_time,
          hallName:this.schedules.hall_name,
          price:this.schedules.price
        }
        });
      },
      getEndtime(){
        this.endtime1=(Math.floor((parseInt(this.schedules.show_time)*60+parseInt(this.schedules.movie_long))/60))%24
        if(this.endtime1<10){
          this.endtime1='0'+this.endtime1
        }
        this.endtime2=Math.floor((parseInt(this.schedules.show_time)*60+parseInt(this.schedules.movie_long))%60)
        if(this.endtime2<10){
          this.endtime2='0'+this.endtime2
        }
      }
    },
    mounted () {
      this.getEndtime();
    },
  }
</script>

<style scoped>
.ticket-container{
  padding: 0.25rem;
  /* margin-bottom: 2rem; */
}
.item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 0.02rem solid #f1f1f1;
  padding: 0.5rem 0;
}
.left{
  flex: 1;
  display: flex;
  flex-flow: column;
  /* justify-content: center; */
  margin-left: 0.5rem;
}
.right{
  margin-right: 0.5rem;
  flex: 1;
  text-align: center;
  border:0.0125rem solid #79BD90;
  padding-top: 0.2rem;
  padding-bottom: 0.3rem;
  border-radius: 1rem;
  color :#fff;
  background-color: #79BD90;
}
.center{
  flex: 3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 0.25rem;
}
.info {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: 0.25rem;
}
.intro{
  font-size: 00.8rem;
  color: #888;
  margin-top: 0.5rem;
}
.hall {
  font-size: 0.8rem;
  color: #888;
}
.end-date{
  font-size: 0.8rem;
  color: #888;
}
/* .van-button {
  border-radius-sm
} */
/* van-button--info van-button--small van-button--round */
</style>